<!--
 * @Description: 服务任务配置
 * @Author: DHL
 * @Date: 2022-08-04 10:45:32
 * @LastEditors: DHL
 * @LastEditTime: 2023-09-07 15:58:56
-->
<template>
  <div class="process-panel-tab__content">
    <el-form ref="dbFormRef" :model="dbForm" label-width="80px">
      <el-form-item label="执行类型" key="serviceType">
        <el-select v-model="dbForm.serviceType">
          <el-option label="Java类" value="class" />
          <el-option label="表达式" value="expression" />
          <el-option label="代理表达式" value="delegateExpression" />
        </el-select>
      </el-form-item>

      <el-form-item label="自动完成" key="expression">
        <el-checkbox v-model="dbForm.expression" label="" @change="handleUpdateElementTask" />
      </el-form-item>

      <el-form-item label="Java类" v-if="dbForm.serviceType === 'class'" key="class">
        <el-input
          v-model="dbForm.class"
          autosize
          type="textarea"
          :rows="3"
          clearable
          @change="handleUpdateElementTask"
        />
      </el-form-item>

      <el-form-item label="表达式" v-if="dbForm.serviceType === 'expression'" key="expression">
        <el-input
          v-model="dbForm.expression"
          autosize
          type="textarea"
          :rows="3"
          clearable
          @change="handleUpdateElementTask"
        />
      </el-form-item>

      <el-form-item
        label="代理表达式"
        v-if="dbForm.serviceType === 'delegateExpression'"
        key="delegateExpression"
      >
        <el-input
          v-model="dbForm.delegateExpression"
          autosize
          type="textarea"
          :rows="3"
          clearable
          @change="handleUpdateElementTask"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
  import { useBpmnStore } from '../../../store/bpmn'
  const bpmnStore = useBpmnStore()

  watch(
    () => bpmnStore.activatedElementId,
    (newVal) => {
      if (newVal) {
        nextTick(() => {
          handleResetTaskForm()
        })
      }
    },
    {
      immediate: true
    }
  )

  const dbForm = reactive({
    serviceType: '', // 脚本类型
    class: '', // Java类
    expression: '', // 表达式
    delegateExpression: '' // 代理表达式
  })

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////
  /**
   *
   */
  function handleResetTaskForm() {
    for (let key in dbForm) {
      let value = bpmnStore.getActivatedElementBusinessObject(key) || dbForm[key]
      if (value) {
        dbForm[key] = value
        dbForm.serviceType = key
      }
    }
  }

  /**
   * 设置脚本表单
   */
  function handleUpdateElementTask() {
    let taskAttr = Object.create(null)

    if (dbForm.serviceType === 'class') {
      taskAttr.class = dbForm.class || null
    } else if (dbForm.serviceType === 'expression') {
      taskAttr.expression = dbForm.expression || null
    } else if (dbForm.serviceType === 'delegateExpression') {
      taskAttr.delegateExpression = dbForm.delegateExpression || null
    }

    bpmnStore.updateProperties(taskAttr)
  }
</script>

<style scoped lang="scss"></style>
